<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Fancyboot - Customize · Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Fancyboot is an open source easy to use customization tool for Bootstrap. Current version supports realtime preview with a convenient color picker.">
    <meta name="keyword" content="Fancyboot, Bootstrap, customization, prabin, pebam, prabinpebam">
    <meta name="author" content="Prabin Pebam">
	
	<!-- Le favicon -->
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

	<!-- Le styles for color picker -->
	<link type="text/css" rel="stylesheet" href="miniColors-master/jquery.miniColors.css">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/fancyboot.css" rel="stylesheet">
    <link href="css/social-icons.css" rel="stylesheet">
    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    



    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	
	 <!-- Google Analytics stuff
    ================================================== -->	
	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-36239865-1']);
	  _gaq.push(['_trackPageview']);

	  (function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
	
	
  </head>

  <body>
	 <!-- Facebook Comments stuff
    ================================================== -->
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=471051992908802";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
		<div class="span10 offset1">
			<img src="img/i-love-bootstrap.png" alt="I Love Bootstrap">
		</div>
		<div class="span12">
			<div class="marketing">
				<h1>Fancyboot</h1>
				<p class="marketing-byline">Customizing Bootstrap the easy way. Made for Bootstrap lovers.</p>
				<p class="marketing-byline">Version 1.0.0</p>
				<p>					 
					<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=prabinpebam&repo=fancyboot&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="55px" height="20px"></iframe>
					<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=prabinpebam&repo=fancyboot&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="55px" height="20px"></iframe>
				</p>
				<hr class="soften">
			  </div>
		</div>
		<div class="span4">
			<h2>What to expect</h2>
			<ul>
				<li>Color picker to conveniently chose and preview colors.</li>
				<li>See realtime preview as you customize each variable.</li>
				<li>Extra variables which are not there in the <a href="http://twitter.github.com/bootstrap/customize.html" target="_blank">official customization page</a>.</li>				
			</ul>
			<h4>What to expect in future</h4>
			<ul>
				<li>Exhaustive coverage of all customizable variables available.</li>
				<li>Save your customizations.</li>
				<li>Share your customization and access others'.</li>
				<li>Ability to use either hexadecimal or <strong>{less}</strong> variables.</li>				
			</ul>
		</div>
		<div class="span4">
			<h2>Points to note</h2>
			<ul>
				<li>This version of Fancyboot is designed for Bootstrap Ver. 2.2.1</li>
				<li>The current version was developed to work fine only on Google Chrome (for now). Some effects might not show correctly in the preview on other browsers.</li>
				<li>Not all effects will be shown in the preview. But don't worry, the final compiled bootstrap css will be perfect as originally intended by Bootstrap.</li>
				<li>Some fields are left without the color picker intentionally as you might want to use <strong>{less}</strong> variables.</li>
			</ul>
		</div>
		<div class="span4">
			<h2>Credits</h2>
			<p>Thanks to the bootstrap team, <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a> for such a wonderful framework.</p>
			<p>Please visit the official Bootstrap website at <a href="http://twitter.github.com/bootstrap/" target="_blank">http://twitter.github.com/bootstrap/</a> for full documentations and downloads.</p>
			<p>The awesome color picker (<a href="http://www.abeautifulsite.net/blog/2011/02/jquery-minicolors-a-color-selector-for-input-controls/" target="_blank">jQuery Minicolor</a>) that's been used in this page is a jQuery plugin from "<a href="http://www.abeautifulsite.net" target="_blank">Cory LaViska for A Beautiful Site </a>".</p>
			<p>Finally, thanks to myself for finally making a decent customization tool for Bootstrap. :)</p>
			<p>Visit my site at <a href="http://designspebam.com" target="_blank">http://designspebam.com</a> to see my other works</p>
			<div class="social tooltips" style="display:block;">
				<a href="http://www.facebook.com/prabinpebam" target="_blank" rel="tooltip" class="facebook" data-original-title="Facebook" >Facebook</a>
				<a href="https://twitter.com/prabinpebam" target="_blank" rel="tooltip" class="twitter" data-original-title="Twitter" >Twitter</a>
				<a href="https://plus.google.com/117627201976556995410/posts" target="_blank"  rel="tooltip" class="googleplus" data-original-title="Google Plus" >Google Plus</a>
				<a href="http://dribbble.com/prabinpebam" target="_blank"  rel="tooltip" class="dribbble" data-original-title="Dribbble" >Dribbble</a>
				<a href="http://www.linkedin.com/pub/prabin-pebam/20/54b/b1b" target="_blank"  rel="tooltip" class="linkedin" data-original-title="LinkedIn" >LinkedIn</a>
				<a href="http://www.prabinpebam.deviantart.com/" target="_blank"  rel="tooltip" class="deviantart" data-original-title="DeviantART" >DeviantART</a>
			</div>
		</div>
		<div class="span12">


        <!-- Customize form
        ================================================== -->
        <form>
			<div class="accordion" id="accordion2">
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
						<h4>1. Choose components <i class="icon-chevron-down pull-right"></i></h4>			
                    </a>
                  </div>
                  <div id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner">
						 <section class="download" id="components">
							<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
							
							<div class="row download-builder">
							  <div class="span3">
								<h3>Scaffolding</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
								<h3>JS Components</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
							  </div><!-- /span -->
							  <div class="span3">
								<h3>Components</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media component</label>
							  </div><!-- /span -->
							  <div class="span3">
								<h3>Miscellaneous</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="media.less"> Media object</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
								<h3>Responsive</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (&lt;767px)</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
							  </div><!-- /span -->
							  <div class="span3">
								<h3>Base CSS</h3>
								<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
								<label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
							  </div><!-- /span -->
							</div><!-- /row -->
						  </section>
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
						<h4>2. Select jQuery plugins <i class="icon-chevron-down pull-right"></i></h4>
                    </a>
                  </div>
                  <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">
						<section class="download" id="plugins">
							<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
							<div class="row download-builder">
							  <div class="span3">
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-transition.js" >
								  Transitions <small>(required for any animation)</small>
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-modal.js" >
								  Modals
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-dropdown.js" >
								  Dropdowns
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-scrollspy.js" >
								  Scrollspy
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-tab.js" >
								  Togglable tabs
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-tooltip.js" >
								  Tooltips
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-popover.js" >
								  Popovers <small>(requires Tooltips)</small>
								</label>
							  </div><!-- /span -->
							  <div class="span3">
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-affix.js" >
								  Affix
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-alert.js" >
								  Alert messages
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-button.js" >
								  Buttons
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-collapse.js" >
								  Collapse
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-carousel.js" >
								  Carousel
								</label>
								<label class="checkbox">
								  <input type="checkbox" checked="true" value="bootstrap-typeahead.js" >
								  Typeahead
								</label>
							  </div><!-- /span -->
							  <div class="span3">
								<h4 class="muted">Heads up!</h4>
								<p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
							  </div><!-- /span -->
							</div><!-- /row -->
						</section>
                    </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
						<h4>3. Customize variables <i class="icon-chevron-down pull-right"></i></h4>
                    </a>
                  </div>
                  <div id="collapseThree" class="accordion-body collapse in">
                    <div class="accordion-inner">
						<section class="download" id="variables">
							<div class="row download-builder">
								<div class="span11">
									<div id="preview" class="preview">
										<div id="navbarPreview" class="navbar">
										  <div class="navbar-inner">
											<div class="container">
											  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
											  </a>
											  <a class="brand" href="#">Title</a>
											  <div class="nav-collapse collapse navbar-responsive-collapse">
												<ul class="nav">
												  <li class="active"><a href="#">Home</a></li>
												  <li><a href="#">Link</a></li>
												  <li class="navbar-text" style="padding:0 15px 0;">Normal Text</li>
												  <li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
													<ul class="dropdown-menu">
													  <li><a href="#">Action</a></li>
													  <li><a href="#">Another action</a></li>
													  <li><a href="#">Something else here</a></li>
													  <li class="divider"></li>
													  <li class="nav-header">Nav header</li>
													  <li><a href="#">Separated link</a></li>
													  <li><a href="#">One more separated link</a></li>
													</ul>
												  </li>
												</ul>
												<div class="navbar-search pull-left">
												  <input type="text" class="search-query span2" placeholder="Search">
												</div>
												<ul class="nav pull-right">
												  <li><a href="#">Link</a></li>
												  <li class="divider-vertical"></li>
												  <li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
													<ul class="dropdown-menu">
													  <li><a href="#">Action</a></li>
													  <li><a href="#">Another action</a></li>
													  <li><a href="#">Something else here</a></li>
													  <li class="divider"></li>
													  <li><a href="#">Separated link</a></li>
													</ul>
												  </li>
												</ul>
											  </div><!-- /.nav-collapse -->
											</div>
										  </div><!-- /navbar-inner -->
										</div><!-- /navbar -->
										
										<div id="navbarInversePreview" class="navbar navbar-inverse">
										  <div class="navbar-inner">
											<div class="container">
											  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
												<span class="icon-bar"></span>
											  </a>
											  <a class="brand" href="#">Title</a>
											  <div class="nav-collapse collapse navbar-responsive-collapse">
												<ul class="nav">
												  <li class="active"><a href="#">Home</a></li>
												  <li><a href="#">Link</a></li>
												  <li class="navbar-text" style="padding:0 15px 0;">Normal Text</li>
												  <li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
													<ul class="dropdown-menu">
													  <li><a href="#">Action</a></li>
													  <li><a href="#">Another action</a></li>
													  <li><a href="#">Something else here</a></li>
													  <li class="divider"></li>
													  <li class="nav-header">Nav header</li>
													  <li><a href="#">Separated link</a></li>
													  <li><a href="#">One more separated link</a></li>
													</ul>
												  </li>
												</ul>
												<div class="navbar-search pull-left">
												  <input type="text" class="search-query span2" placeholder="Search">
												</div>
												<ul class="nav pull-right">
												  <li><a href="#">Link</a></li>
												  <li class="divider-vertical"></li>
												  <li class="dropdown">
													<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
													<ul class="dropdown-menu">
													  <li><a href="#">Action</a></li>
													  <li><a href="#">Another action</a></li>
													  <li><a href="#">Something else here</a></li>
													  <li class="divider"></li>
													  <li><a href="#">Separated link</a></li>
													</ul>
												  </li>
												</ul>
											  </div><!-- /.nav-collapse -->
											</div>
										  </div><!-- /navbar-inner -->
										</div><!-- /navbar -->
										
										
										<div class="row">
											<div class="span7">
												<div class="row">
													<div class="span4">
														<h3>Heading</h3>								
														<p>Nullam quis risus eget urna mollis <a href="#">ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
														<p>Cum sociis natoque penatibus et magnis dis <a href="#">parturient montes</a>, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
														<p>
															<span class="label">Default</span>
															<span class="label label-success">Success</span>
															<span class="label label-warning">Warning</span>
															<span class="label label-important">Important</span>
															<span class="label label-info">Info</span>
															<span class="label label-inverse">Inverse</span>
														</p>
													</div>
													
													<div class="span3">
														<h3>Table</h3>
														<table class="table table-striped">
														  <thead>
															<tr>
															  <th>#</th>
															  <th>First Name</th>
															  <th>Last Name</th>
															  <th>Username</th>
															</tr>
														  </thead>
														  <tbody>
															<tr class="rowAccent">
															  <td>1</td>
															  <td>Mark</td>
															  <td>Otto</td>
															  <td>@mdo</td>
															</tr>
															<tr>
															  <td>2</td>
															  <td>Jacob</td>
															  <td>Thornton</td>
															  <td>@fat</td>
															</tr>
															<tr class="rowAccent">
															  <td>3</td>
															  <td>Larry</td>
															  <td>the Bird</td>
															  <td>@twitter</td>
															</tr>
														  </tbody>
														</table>
														<h4>Pagination</h4>
														<div class="pagination">
														  <ul>
															<li class="normal"><a href="#">«</a></li>
															<li class="active"><a href="#">1</a></li>
															<li class="normal"><a href="#">2</a></li>
															<li class="normal"><a href="#">3</a></li>
															<li class="normal"><a href="#">4</a></li>
															<li class="normal"><a href="#">5</a></li>
															<li class="normal"><a href="#">»</a></li>
														  </ul>
														</div>
													</div>
												</div>
												<div class="row">
													<div class="span7">
														<hr>
														<button type="button" class="btn btn-normal">Default</button>
														<button type="button" class="btn btn-primary">Primary</button>
														<button type="button" class="btn btn-info">Info</button>
														<button type="button" class="btn btn-success">Success</button>
														<button type="button" class="btn btn-warning">Warning</button>
														<button type="button" class="btn btn-danger">Danger</button>
														<button type="button" class="btn btn-inverse">Inverse</button>
													</div>
												</div>	
											</div>
											
											<div class="span3">
												<fieldset class="formPreview">
													<legend>Form Heading</legend>
													<label>Normal input</label>
													<input type="text" placeholder="Type something…">
													<span class="help-block">Example block-level help text here.</span>
													
													<label>Disabled input</label>
													<input type="text" readonly="readonly" placeholder="Disabled input">
													
													<label>Dropdown selection</label>
													<select>
														<option></option>
														<option>1</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
													</select>
													
													<label>Text area</label>
													<textarea rows="3"></textarea>
													
													<div class="form-actions">
														<button type="submit" class="btn btn-primary">Save changes</button>
														<button type="button" class="btn">Cancel</button>
													</div>
												</fieldset>
											</div>
										</div>
									</div>
								</div>
								
								<div class="span12">
									<div class="tabbable tabs-left" style="margin-bottom: 18px;">
									  <ul class="nav nav-tabs">
										<li class="active"><a href="#tabMisc1" data-toggle="tab">Misc 1</a></li>
										<li class=""><a href="#tabMisc2" data-toggle="tab">Misc 2</a></li>
										<li class=""><a href="#tabGrid" data-toggle="tab">Grid</a></li>
										<li class=""><a href="#tabTypography" data-toggle="tab">Typography</a></li>
										<li class=""><a href="#tabHeroUnit" data-toggle="tab">Hero Unit</a></li>
										<li class=""><a href="#tabTables" data-toggle="tab">Tables</a></li>
										<li class=""><a href="#tabForms" data-toggle="tab">Forms</a></li>
										<li class=""><a href="#tabButtons" data-toggle="tab">Buttons</a></li>
										<li class=""><a href="#tabAlerts" data-toggle="tab">Alerts</a></li>
										<li class=""><a href="#tabNavbar" data-toggle="tab">Navbar</a></li>
										<li class=""><a href="#tabNavbarInverse" data-toggle="tab">Navbar Inverse</a></li>
										<li class=""><a href="#tabDropdowns" data-toggle="tab">Dropdowns</a></li>
									  </ul>
									  <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
										<div class="tab-pane active" id="tabMisc1">
											<div class="row download-builder">
												<div class="span10">
													<h3>Misc 1</h3>
													<h4>Scaffolding</h4>
												</div>
												<div class="span3">
													<label>@bodyBackground</label>
													<input id="bodyBackground" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@textColor</label>
													<input id="textColor" type="text" class="span2 colorPicker" value="#333333" placeholder="#333333">
												</div>
												<div class="span3">
													<label>@headingsColor</label>
													<input id="headingsColor" type="text" class="span2 colorPicker" value="#333333" placeholder="#333333">
												</div>
											</div>
											
											<div class="row download-builder">
												<div class="span10">
													<h4>Links</h4>
												</div>
												<div class="span3">
													<label>@linkColor</label>
													<input id="linkColor" type="text" class="span2 colorPicker" value="#0088cc" placeholder="#0088cc">
												</div>
												<div class="span3">
													<label>@linkColorHover</label>
													<input id="linkColorHover" type="text" class="span2 colorPicker" value="#005580" placeholder="#005580">
												</div>
											</div>
											
											<div class="row download-builder">	
												<div class="span10">
													<h4>Sprites</h4>
												</div>
												<div class="span3">
													<label>@iconSpritePath</label>
													<input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
												</div>
												<div class="span3">
													<label>@iconWhiteSpritePath</label>
													<input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabMisc2">
											<div class="row download-builder">
												<div class="span10">
													<h3>Misc 2</h3>
													<h4>Pagination</h4>
												</div>
												<div class="span3">
													<label>@paginationBackground</label>
													<input id="paginationBackground" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content='As of Bootstrap ver 2.2.1, the "link color" and the "link hover color" in pagination is directly linked with the global document link color and can not be customized separately.' ><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@paginationActiveBackground</label>
													<input id="paginationActiveBackground" type="text" class="span2 colorPicker" value="#f5f5f5" placeholder="#f5f5f5">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content="As of Bootstrap ver 2.2.1, the font color of the active field is set to a default value of #999 and can't be customized with {less}." ><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@paginationBorder</label>
													<input id="paginationBorder" type="text" class="span2 colorPicker" value="#dddddd" placeholder="#dddddd">
												</div>
												
												<div class="span10">
													<h4>Other stuffs</h4>
													<div id="misc2Preview" class="preview">
														<div class="well">
															<h3>Sample content inside a well</h3>
															<p>This is what a paragraph will look like inside a well. The color of the font is taken directly from the global font color assigned to the body markup and can't be customized separately (Bootstrap version 2.2.1). Hence you need to chose the well background color in such a way that the font color works both for body background and the well background.</p>
															<p>
																<a class="btn btn-normal">Cancel</a>
																<a class="btn btn-primary">Commit</a>
															</p>
														</div>
													</div>
												</div>
												<div class="span3">
													<label>@hrBorder</label>
													<input id="hrBorder" type="text" class="span2 colorPicker" value="#eeeeee" placeholder="#eeeeee">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content="As of Bootstrap ver 2.2.1, the border-bottom of <hr> is set to a default value of #fff and can't be customized separately which might not work well with a dark background." ><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@wellBackground</label>
													<input id="wellBackground" type="text" class="span2 colorPicker" value="#f5f5f5" placeholder="#f5f5f5">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabGrid">
											<div class="row download-builder">
												<div class="span10">
													<h3>Grid system</h3>
													<p class="alert alert-info"><span class="label label-info"><i class="icon-info-sign icon-white"></i></span> The current version does not support preview of the following variables.</p>
												</div>
												<div class="span3">				
													<label>@gridColumns</label>
													<input type="text" class="span3" placeholder="12">
												</div>
												<div class="span3">	
													<label>@gridColumnWidth</label>
													<input type="text" class="span3" placeholder="60px">
												</div>
												<div class="span3">	
													<label>@gridGutterWidth</label>
													<input type="text" class="span3" placeholder="20px">
												</div>
												<div class="span3">	
													<label>@gridColumnWidth1200</label>
													<input type="text" class="span3" placeholder="70px">
												</div>
												<div class="span3">	
													<label>@gridGutterWidth1200</label>
													<input type="text" class="span3" placeholder="30px">
												</div>
												<div class="span3">	
													<label>@gridColumnWidth768</label>
													<input type="text" class="span3" placeholder="42px">
												</div>
												<div class="span3">
													<label>@gridGutterWidth768</label>
													<input type="text" class="span3" placeholder="20px">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabTypography">
											<div class="row download-builder">
												<div class="span10">
													<h3>Typography</h3>
													<p class="alert"><span class="label label-warning"><i class="icon-warning-sign icon-white"></i></span> Work on eanbling color picker and preview still going on. Check back in a few days. Nevertheles, you can still enter the values manually and compile your bootstrap.</p>
												</div>
												<div class="span3">
													<label>@sansFontFamily</label>
													<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
												</div>
												<div class="span3">
													<label>@serifFontFamily</label>
													<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
												</div>
												<div class="span3">
													<label>@monoFontFamily</label>
													<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
												</div>
												<div class="span3">
													<label>@baseFontSize</label>
													<input type="text" class="span3" placeholder="14px">
												</div>
												<div class="span3">
													<label>@baseFontFamily</label>
													<input type="text" class="span3" placeholder="@sansFontFamily">
												</div>
												<div class="span3">
													<label>@baseLineHeight</label>
													<input type="text" class="span3" placeholder="20px">
												</div>
												<div class="span3">
													<label>@altFontFamily</label>
													<input type="text" class="span3" placeholder="@serifFontFamily">
												</div>
												<div class="span3">
													<label>@headingsFontFamily</label>
													<input type="text" class="span3" placeholder="inherit">
												</div>
												<div class="span3">
													<label>@headingsFontWeight</label>
													<input type="text" class="span3" placeholder="bold">
												</div>
												<div class="span3">
													<label>@headingsColor</label>
													<input type="text" class="span3" placeholder="inherit">
												</div>
												<div class="span3">
													<label>@fontSizeLarge</label>
													<input type="text" class="span3" placeholder="@baseFontSize * 1.25">
												</div>
												<div class="span3">
													<label>@fontSizeSmall</label>
													<input type="text" class="span3" placeholder="@baseFontSize * 0.85">
												</div>
												<div class="span3">
													<label>@fontSizeMini</label>
													<input type="text" class="span3" placeholder="@baseFontSize * 0.75">
												</div>
												<div class="span3">
													<label>@paddingLarge</label>
													<input type="text" class="span3" placeholder="11px 19px">
												</div>
												<div class="span3">
													<label>@paddingSmall</label>
													<input type="text" class="span3" placeholder="2px 10px">
												</div>
												<div class="span3">
													<label>@paddingMini</label>
													<input type="text" class="span3" placeholder="1px 6px">
												</div>
												<div class="span3">
													<label>@baseBorderRadius</label>
													<input type="text" class="span3" placeholder="4px">
												</div>
												<div class="span3">
													<label>@borderRadiusLarge</label>
													<input type="text" class="span3" placeholder="6px">
												</div>
												<div class="span3">
													<label>@borderRadiusSmall</label>
													<input type="text" class="span3" placeholder="3px">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabHeroUnit">
											<div class="row download-builder">
												<div class="span10">
													<h3>Hero Unit</h3>
													<div id="heroUnitPreview" class="preview">
														<div class="hero-unit">
														  <h1>Hello, world!</h1>
														  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
														  <p><a class="btn btn-primary btn-large">Learn more</a></p>
														</div>
													</div>
												</div>
												<div class="span3">
													<label>@heroUnitBackground</label>
													<input id="heroUnitBackground" type="text" class="span2 colorPicker" value="#eeeeee" placeholder="#eeeeee">
												</div>
												<div class="span3">
													<label>@heroUnitHeadingColor</label>
													<input id="heroUnitHeadingColor" type="text" class="span2 colorPicker" value="#333333" placeholder="#333333">
												</div>
												<div class="span3">
													<label>@heroUnitLeadColor</label>
													<input id="heroUnitLeadColor" type="text" class="span2 colorPicker" value="#333333" placeholder="#333333">
												</div>
											</div>
										</div>
										
										<div class="tab-pane" id="tabTables">
											<div class="row download-builder">
												<div class="span10">
													<h3>Tables</h3>
												</div>
												<div class="span3">
													<label>@tableBackground</label>
													<input id="tableBackground"type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@tableBackgroundAccent</label>
													<input id="tableBackgroundAccent" type="text" class="span2 colorPicker" value="#f9f9f9" placeholder="#f9f9f9">
												</div>
												<div class="span3">
													<label>@tableBackgroundHover</label>
													<input id="tableBackgroundHover" type="text" class="span2 colorPicker" value="#f5f5f5" placeholder="#f5f5f5">
												</div>
												<div class="span3">
													<label>@tableBorder</label>
													<input id="tableBorder" type="text" class="span2 colorPicker" value="#dddddd" placeholder="#dddddd">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabForms">
											<div class="row download-builder">
												<div class="span10">
													<h3>Forms</h3>
												</div>
												<div class="span3">
													<label>@placeholderText</label>
													<input id="placeholderText" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
													<a	href="#"
														class="label label-info previewTooltip"
														rel="popover"
														data-trigger="hover"
														data-original-title="Info"
														data-content="Placeholder color is previewd only temporaily as you change the color until I find a better way." >
															<i class="icon-info-sign icon-white"></i>
													</a>
												</div>
												<div class="span3">
													<label>@inputBackground</label>
													<input id="inputBackground" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@inputBorder</label>
													<input id="inputBorder" type="text" class="span2 colorPicker" value="#cccccc" placeholder="#cccccc">
												</div>
												<div class="span3">
													<label>@inputBorderRadius</label>
													<input id="inputBorderRadius" type="text" class="span2" value="3px" placeholder="3px">
													<a	href="#"
														class="label label-info previewTooltip"
														rel="popover"
														data-trigger="hover"
														data-original-title="Info"
														data-content="Focus on the field & use the up & down arrow key to adjust value." >
															<i class="icon-info-sign icon-white"></i>
													</a>
												</div>
												<div class="span3">
													<label>@inputDisabledBackground</label>
													<input id="inputDisabledBackground" type="text" class="span2 colorPicker" value="#eeeeee" placeholder="#eeeeee">
												</div>
												<div class="span3">
													<label>@formActionsBackground</label>
													<input id="formActionsBackground" type="text" class="span2 colorPicker" value="#f5f5f5" placeholder="#f5f5f5">
												</div>
												<div class="span10">
													<p class="alert alert-info">
														<span class="label label-info"><i class="icon-info-sign icon-white"></i></span>
														 Unluckily, as of Bootstrap 2.2.1, the text color of the form fields has all been assigned a default value
														 and can't be changed. What you see is the default color which might not be suitable for darker background color.
														 You can't have any value in the form preview fields as that interfere when you finally submit the form to compile.
														 Hence any value is cleared as soon as the field lose focus.
													</p>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabButtons">
											<div class="row download-builder">
												<div class="span10">
													<h3>Buttons</h3>
												</div>
												<div class="span10">
													<div class="row">
														<div class="span3">
															<div id="buttonsPreview" class="preview">
																<button type="button" class="btn btn-large btn-block btn-normal">Default</button>
																<button type="button" class="btn btn-large btn-block btn-primary">Primary</button>
																<button type="button" class="btn btn-large btn-block btn-info">Info</button>
																<button type="button" class="btn btn-large btn-block btn-success">Success</button>
																<button type="button" class="btn btn-large btn-block btn-warning">Warning</button>
																<button type="button" class="btn btn-large btn-block btn-danger">Danger</button>
																<button type="button" class="btn btn-large btn-block btn-inverse">Inverse</button>
															</div>
														</div>
														<div class="span7">
															<div class="span3">
																<label>@btnBackground</label>
																<input id="btnBackground" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
															</div>
															<div class="span3">
																<label>@btnBackgroundHighlight</label>
																<input id="btnBackgroundHighlight" type="text" class="span2 colorPicker" value="#e6e6e6" placeholder="#e6e6e6">
															</div>
															<div class="span3">
																<label>@btnPrimaryBackground</label>
																<input id="btnPrimaryBackground" type="text" class="span2 colorPicker" value="#0088cc" placeholder="#0088cc">
															</div>
															<div class="span3">
																<label>@btnPrimaryBackgroundHighlight</label>
																<input id="btnPrimaryBackgroundHighlight" type="text" class="span2 colorPicker" value="#0044cc" placeholder="#0044cc">
															</div>
															
															<div class="span3">
																<label>@btnInfoBackground</label>
																<input id="btnInfoBackground" type="text" class="span2 colorPicker" value="#5bc0de" placeholder="#5bc0de">
															</div>
															<div class="span3">
																<label>@btnInfoBackgroundHighlight</label>
																<input id="btnInfoBackgroundHighlight" type="text" class="span2 colorPicker" value="#2f96b4" placeholder="#2f96b4">
															</div>
															
															<div class="span3">
																<label>@btnSuccessBackground</label>
																<input id="btnSuccessBackground" type="text" class="span2 colorPicker" value="#62c462" placeholder="#62c462">
															</div>
															<div class="span3">
																<label>@btnSuccessBackgroundHighlight</label>
																<input id="btnSuccessBackgroundHighlight" type="text" class="span2 colorPicker" value="#51a351" placeholder="#51a351">
															</div>
															
															<div class="span3">
																<label>@btnWarningBackground</label>
																<input id="btnWarningBackground" type="text" class="span2 colorPicker" value="#fbb450" placeholder="#fbb450">
															</div>
															<div class="span3">
																<label>@btnWarningBackgroundHighlight</label>
																<input id="btnWarningBackgroundHighlight" type="text" class="span2 colorPicker" value="#f89406" placeholder="#f89406">
															</div>
															
															<div class="span3">
																<label>@btnDangerBackground</label>
																<input id="btnDangerBackground" type="text" class="span2 colorPicker" value="#ee5f5b" placeholder="#ee5f5b">
															</div>
															<div class="span3">
																<label>@btnDangerBackgroundHighlight</label>
																<input id="btnDangerBackgroundHighlight" type="text" class="span2 colorPicker" value="#bd362f" placeholder="#bd362f">
															</div>
															
															<div class="span3">
																<label>@btnInverseBackground</label>
																<input id="btnInverseBackground" type="text" class="span2 colorPicker" value="#444444" placeholder="#444444">
															</div>
															<div class="span3">
																<label>@btnInverseBackgroundHighlight</label>
																<input id="btnInverseBackgroundHighlight" type="text" class="span2 colorPicker" value="#222222" placeholder="#222222">
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabAlerts">
											<div class="row download-builder">
												<div class="span10">
													<h3>Form states &amp; alerts</h3>
												</div>
												<div class="span9">
													<div id="alertPreview" class="preview">
														<div class="alert alert-warning">
														  <button type="button" class="close" >×</button>
														  <strong>Warning!</strong> Best check yo self, you're not looking too good.
														</div>
														<br>
														<div class="alert alert-error">
														  <button type="button" class="close" >×</button>
														  <strong>Oh snap!</strong> Change a few things up and try submitting again.
														</div>
														<br>
														<div class="alert alert-success">
														  <button type="button" class="close" >×</button>
														  <strong>Well done!</strong> You successfully read this important alert message.
														</div>
														<br>
														<div class="alert alert-info">
														  <button type="button" class="close" >×</button>
														  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
														</div>
													</div>
												</div>
												
												<div class="span3">
													<label>@warningBackground</label>
													<input id="warningBackground" type="text" class="span2 colorPicker" value="#fcf8e3" placeholder="#fcf8e3">
												</div>
												<div class="span3">
													<label>@warningText</label>
													<input id="warningText" type="text" class="span2 colorPicker" value="#c09853" placeholder="#c09853">
												</div>
												<div class="span3">
													<label>@warningBorder</label>
													<input id="warningBorder" type="text" class="span2 colorPicker" value="#fbeed5" placeholder="#FBEED5">
												</div>
												<div class="span3">
													<label>@errorBackground</label>
													<input id="errorBackground" type="text" class="span2 colorPicker" value="#f2dede" placeholder="#f2dede">
												</div>
												<div class="span3">
													<label>@errorText</label>
													<input id="errorText" type="text" class="span2 colorPicker" value="#b94a48" placeholder="#b94a48">
												</div>
												<div class="span3">
													<label>@errorBorder</label>
													<input id="errorBorder" type="text" class="span2 colorPicker" value="#eed3d7" placeholder="#eed3d7">
												</div>
												<div class="span3">
													<label>@successBackground</label>
													<input id="successBackground" type="text" class="span2 colorPicker" value="#dff0d8" placeholder="#dff0d8">
												</div>
												<div class="span3">
													<label>@successText</label>
													<input id="successText" type="text" class="span2 colorPicker" value="#468847" placeholder="#468847">
												</div>
												<div class="span3">
													<label>@successBorder</label>
													<input id="successBorder" type="text" class="span2 colorPicker" value="#d6e9c6" placeholder="#d6e9c6">
												</div>
												<div class="span3">
													<label>@infoBackground</label>
													<input id="infoBackground" type="text" class="span2 colorPicker" value="#d9edf7" placeholder="#d9edf7">
												</div>
												<div class="span3">
													<label>@infoText</label>
													<input id="infoText" type="text" class="span2 colorPicker" value="#3a87ad" placeholder="#3a87ad">
												</div>
												<div class="span3">
													<label>@infoBorder</label>
													<input id="infoBorder" type="text" class="span2 colorPicker" value="#bce8f1" placeholder="#bce8f1">
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabNavbar">
											<div class="row download-builder">
												<div id="navbar" class="span10">
													<h3>Navbar</h3>
												</div>
												<div class="span3">
													<label>@navbarBackground</label>
													<input id="navbarBackground" type="text" class="span2 colorPicker" value="#f2f2f2" placeholder="#f2f2f2">
												</div>
												<div class="span3">
													<label>@navbarBackgroundHighlight</label>
													<input id="navbarBackgroundHighlight" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarBorder</label>
													<input id="navbarBorder" type="text" class="span2 colorPicker" value="#d4d4d4" placeholder="#d4d4d4">
												</div>
												<div class="span3">
													<label>@navbarText</label>
													<input id="navbarText" type="text" class="span2 colorPicker" value="#777777" placeholder="#777777">
												</div>
												<div class="span3">
													<label>@navbarBrandColor</label>
													<input id="navbarBrandColor" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
												</div>
												<div class="span3">
													<label>@navbarLinkColor</label>
													<input id="navbarLinkColor" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
												</div>
												<div class="span3">
													<label>@navbarLinkColorHover</label>
													<input id="navbarLinkColorHover" type="text" class="span2 colorPicker" value="#333333" placeholder="#333333">
												</div>
												<div class="span3">
													<label>@navbarLinkBackgroundActive</label>
													<input id="navbarLinkBackgroundActive" type="text" class="span2 colorPicker" value="#e5e5e5" placeholder="#e5e5e5">
												</div>
												<div class="span3">
													<label>@navbarLinkColorActive</label>
													<input id="navbarLinkColorActive" type="text" class="span2 colorPicker" value="#555555" placeholder="#555555">
												</div>
												<div class="span3">
													<label>@navbarLinkBackgroundHover</label>
													<input id="navbarLinkBackgroundHover" type="text" class="span2" value="transparent">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content="This field has been left without color picker to enable variables other than hexadecimal color codes to be entered. You can still manually enter hexadecimal codes." ><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@navbarSearchBackground</label>
													<input id="navbarSearchBackground" type="text" class="span2" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarSearchBackgroundFocus</label>
													<input id="navbarSearchBackgroundFocus" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarSearchBorder</label>
													<input id="navbarSearchBorder" type="text" class="span2 colorPicker" value="#cccccc" placeholder="#cccccc">
												</div>
												<div class="span3">
													<label>@navbarSearchPlaceholderColor</label>
													<input id="navbarSearchPlaceholderColor" type="text" class="span2 colorPicker" value="#cccccc" placeholder="#cccccc">
												</div>
												<div class="span10">
													<h4>Common elements between Navbar & Navbar inverse</h4>
												</div>
												<div class="span3">
													<label>@navbarHeight</label>
													<input id="navbarHeight" type="text" class="span2" placeholder="40px">
												</div>
												<div class="span3">
													<label>@navbarCollapseWidth</label>
													<input type="text" class="span2" placeholder="979px">
													<a href="#" class="label label-warning previewTooltip" rel="popover" data-trigger="hover" data-original-title="Warning!" data-content="The current version doesn't support preview of this feature." ><i class="icon-warning-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@navbarCollapseDesktopWidth</label>
													<input type="text" class="span2" placeholder="@navbarCollapseWidth + 1">
													<a href="#" class="label label-warning previewTooltip" rel="popover" data-trigger="hover" data-original-title="Warning!" data-content="The current version doesn't support preview of this feature." ><i class="icon-warning-sign icon-white"></i></a>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabNavbarInverse">
											<div class="row download-builder">
												<div id="navbarInverse" class="span10">
													<h3>Navbar inverse</h3>
												</div>
												<div class="span3">
													<label>@navbarInverseBackground</label>
													<input id="navbarInverseBackground" type="text" class="span2 colorPicker" value="#111111" placeholder="#111111">
												</div>
												<div class="span3">
													<label>@navbarInverseBackgroundHighlight</label>
													<input id="navbarInverseBackgroundHighlight" type="text" class="span2 colorPicker" value="#222222" placeholder="#222222">
												</div>
												<div class="span3">
													<label>@navbarInverseBorder</label>
													<input id="navbarInverseBorder" type="text" class="span2 colorPicker" value="#252525" placeholder="#252525">
												</div>
												<div class="span3">
													<label>@navbarInverseText</label>
													<input id="navbarInverseText" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
												</div>
												<div class="span3">
													<label>@navbarInverseBrandColor</label>
													<input id="navbarInverseBrandColor" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
												</div>
												<div class="span3">
													<label>@navbarInverseLinkColor</label>
													<input id="navbarInverseLinkColor" type="text" class="span2 colorPicker" value="#999999" placeholder="#999999">
												</div>
												<div class="span3">
													<label>@navbarInverseLinkColorHover</label>
													<input id="navbarInverseLinkColorHover" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarInverseLinkBackgroundActive</label>
													<input id="navbarInverseLinkBackgroundActive" type="text" class="span2 colorPicker" value="#111111" placeholder="#111111">
												</div>
												<div class="span3">
													<label>@navbarInverseLinkColorActive</label>
													<input id="navbarInverseLinkColorActive" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarInverseLinkBackgroundHover</label>
													<input id="navbarInverseLinkBackgroundHover" type="text" class="span2" value="transparent">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content="This field has been left without color picker to enable variables other than hexadecimal color codes to be entered. You can still manually enter hexadecimal codes." ><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@navbarInverseSearchBackground</label>
													<input id="navbarInverseSearchBackground" type="text" class="span2 colorPicker" value="#515151">
												</div>
												<div class="span3">
													<label>@navbarInverseSearchBackgroundFocus</label>
													<input id="navbarInverseSearchBackgroundFocus" type="text" class="span2 colorPicker" value="#ffffff" placeholder="#ffffff">
												</div>
												<div class="span3">
													<label>@navbarInverseSearchBorder</label>
													<input id="navbarInverseSearchBorder" type="text" class="span2 colorPicker" value="#111111" placeholder="#111111">
												</div>
												<div class="span3">
													<label>@navbarInverseSearchPlaceholderColor</label>
													<input id="navbarInverseSearchPlaceholderColor" type="text" class="span2 colorPicker" value="#cccccc" placeholder="#cccccc">
													<a href="#" class="label label-warning previewTooltip" rel="popover" data-trigger="hover" data-original-title="Warning!" data-content="The current version doesn't support preview of this feature." ><i class="icon-warning-sign icon-white"></i></a>
												</div>
												<div class="span10">
													<hr>
													<p>Please go to the "Navbar" tab for common variables between "Navbar" and "Navbar Inverse".</p>
													<p><Strong>Note:</strong> As of current, the colorpicker plugin does not allow any other value than hexadecimal code in the input field. So the <em>@navbarLinkBackgroundHover</em> field has been left without the color picker in case you want it to be transparent. But you can always type a hexadecimal code of your choice and it should work.</p>
												</div>
											</div>
										</div>
										<div class="tab-pane" id="tabDropdowns">
											<div class="row download-builder">
												<div class="span9">
													<h3>Dropdowns</h3>
													  <div id="dropdownPreview" class="preview">
														<div class="dropdown clearfix">
														  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;" >
															<li><a tabindex="-1" href="#" >Action</a></li>
															<li><a tabindex="-1" href="#" >Another action</a></li>
															<li><a tabindex="-1" href="#" >Something else here</a></li>
															<li class="divider" ></li>
															<li><a tabindex="-1" href="#" >Separated link</a></li>
														  </ul>
														</div>
													  </div>
												</div>
												<div class="span3">
													<label>@dropdownBackground</label>
													<input id="dropdownBackground" type="text" class="span2 colorPicker" value="#ffffff">
												</div>
												<div class="span3">
													<label>@dropdownBorder</label>
													<input id="dropdownBorder" type="text" class="span2" value="rgba(0,0,0,.2)">
													<a href="#" class="label label-info previewTooltip" rel="popover" data-trigger="hover" data-original-title="Info" data-content="This field has been left without color picker to enable variables other than hexadecimal color codes to be entered. You can still manually enter hexadecimal codes."><i class="icon-info-sign icon-white"></i></a>
												</div>
												<div class="span3">
													<label>@dropdownLinkColor</label>
													<input id="dropdownLinkColor" type="text" class="span2 colorPicker" value="#222222">
												</div>
												<div class="span3">
													<label>@dropdownLinkColorHover</label>
													<input id="dropdownLinkColorHover" type="text" class="span2 colorPicker" value="#ffffff">
												</div>
												<div class="span3">
													<label>@dropdownLinkBackgroundHover</label>
													<input id="dropdownLinkBackgroundHover" type="text" class="span2 colorPicker" value="#0088cc">
												</div>
												<div class="span3">
													<label>@dropdownDividerTop</label>
													<input id="dropdownDividerTop" type="text" class="span2 colorPicker" value="#e5e5e5">
												</div>
												<div class="span3">
													<label>@dropdownDividerBottom</label>
													<input id="dropdownDividerBottom" type="text" class="span2 colorPicker" value="#ffffff">
												</div>
											</div>
										</div>
									  </div>
									</div>
								</div>
							</div>
						  </section>
                    
                    </div>
                  </div>
                </div>
              </div>

          <section class="download" id="download">
            <div class="page-header">
              <h3>
                4. Download
              </h3>
            </div>
            <div class="download-btn">
              <a class="btn btn-primary" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
              <h4>What's included?</h4>
              <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
            </div>
          </section><!-- /download -->
        </form>
      </div>
    </div>
	<div class="row">
		<div class="span12">
			<h4>Please leave your comments below</h4>
			<div class="fb-comments" data-href="http://fancyboot.designspebam.com/" data-num-posts="5" data-width="800"></div>
		</div>
	</div>

  </div><!-- /container -->



    <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
		<div class="social tooltips pull-right" style="display:block;">
			<a href="http://www.facebook.com/prabinpebam" target="_blank" rel="tooltip" class="facebook" data-original-title="Facebook" >Facebook</a>
			<a href="https://twitter.com/prabinpebam" target="_blank" rel="tooltip" class="twitter" data-original-title="Twitter" >Twitter</a>
			<a href="https://plus.google.com/117627201976556995410/posts" target="_blank"  rel="tooltip" class="googleplus" data-original-title="Google Plus" >Google Plus</a>
			<a href="http://dribbble.com/prabinpebam" target="_blank"  rel="tooltip" class="dribbble" data-original-title="Dribbble" >Dribbble</a>
			<a href="http://www.linkedin.com/pub/prabin-pebam/20/54b/b1b" target="_blank"  rel="tooltip" class="linkedin" data-original-title="LinkedIn" >LinkedIn</a>
			<a href="http://www.prabinpebam.deviantart.com/" target="_blank"  rel="tooltip" class="deviantart" data-original-title="DeviantART" >DeviantART</a>
		</div>
        
        <p>Designed & developed for bootstrap lovers by <a href="http://designspebam.com" target="_blank">Prabin Pebam</a></p>
		<p><small><em>Last updated on 21st November, 2012.</em></small></p>
        
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.js"></script>
    <script src="js/google-code-prettify/prettify.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
    <script src="js/bootstrap-affix.js"></script>
    <script src="js/application.js"></script>

	<script type="text/javascript" src="miniColors-master/jquery.miniColors.js"></script>
	<script type="text/javascript" src="js/fancyboot.js"></script>


  </body>
</html>